在大型前端項目中，隨著開發的進行，CSS 文件往往會變得越來越龐大，其中有許多不再使用的樣式。這不僅會影響網站的效能，也會增加維護的難度。PurgeCSS 和 UnCSS 是兩個能幫助我們清理未使用 CSS 的工具，讓最終的樣式表更輕量化，提升網站性能。

一、PurgeCSS

PurgeCSS 是一個能夠剖析 HTML、JavaScript 和 CSS 文件，找出未被使用的 CSS 選擇器，並將其移除的工具。它可以與各種前端框架（如 React、Vue、Angular）及工具（如 Webpack、Gulp、PostCSS）集成，輕鬆實現 CSS 優化。

1. PurgeCSS 的特點

高度可配置：能夠根據開發者的需求，自定義需要保留或移除的 CSS。
支援多種模板語言：支援 HTML、JavaScript、EJS、Jinja 等多種語言。
與工具整合：可與 Webpack、Gulp、PostCSS 等工具無縫整合。

(有空再使用看看!)

2. 安裝與使用

1.安裝 PurgeCSS：

npm install @fullhuman/postcss-purgecss

2.配置 PostCSS 使用 PurgeCSS (postcss.config.js)：

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.js'], // 檢查的 HTML 和 JS 文件路徑
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
};

二、UnCSS

UnCSS 是另一個用於移除未使用 CSS 的工具。它會掃描 HTML 文件，找出與之相關的 CSS 規則，並將無關的樣式移除。UnCSS 是較早期的清理工具，但依然具有實用性，適合用於簡單的項目。

1. UnCSS 的特點

簡單易用：透過命令行即可執行，適合快速處理小型專案的 CSS 清理。
支援多種輸出：可以輸出成單一的 CSS 文件或直接將結果顯示於終端。

2. 安裝與使用

安裝 UnCSS：

npm install uncss

使用命令行清理未使用的 CSS：

uncss index.html > styles.cleaned.css

三、PurgeCSS 與 UnCSS 的比較

快完賽了，加油!!!